<template>
  <header-bar></header-bar>
  <div class="container">
    <el-dialog v-model="dialogVisualFlag" @close="closeDialog">
      <el-switch
          v-model="showEmoji"
          active-color="#13ce66"
          active-text="emoji模式">
      </el-switch>
      <el-row style="margin-top: 15px" type="flex" justify="center" align="middle">
        <el-button @click="gotoSingleImage">{{ showEmoji ? '🔍' : '原图' }}</el-button>
        <el-button @click="resurgenceSinglePictureHandler" type="danger">{{ showEmoji ? '🥚' : '复活' }}</el-button>
      </el-row>
    </el-dialog>
    <div class="gray-row">
      <div class="text">复活</div>
    </div>
    <Waterfall
        :list="imagesData.list"
        :breakpoints="{
        1200: { rowPerView: 4 },
        800: { rowPerView: 3 },
        500: { rowPerView: 2 },
      }"
        :width="384"
        :gutter="10"
    >
      <template #item="{ item }">
        <el-card
            ref="card"
            :body-style="{ padding: '0px' }"
        >
          <LazyImg :url="item.url" @click="clickImgHandler(item.id)"/>
        </el-card>
      </template>
    </Waterfall>
  </div>
  <el-divider>无法自动加载？</el-divider>
  <el-button type="primary" round @click="getMoreImg">获取更多图图</el-button>
</template>

<script lang="ts" setup>
import {LazyImg, Waterfall} from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
import {
  fetchImgInfosListInvisible, getPraiseNumberByIDApi,
  getWaterfallPicInfosList,
  resurgenceSinglePictureById,
} from "@/api";
import {onBeforeMount, onMounted, reactive, ref} from "vue";
import {ImageReturnInfo} from "@/types";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import HeaderBar from "@/components/HeaderBar.vue";


const router = useRouter();
const showEmoji = ref(false);

const imagesData = reactive({
  list: new Array<ImageReturnInfo>(),
});

const getMoreImg = () => {
  getWaterfallPicInfosList(50).then((res) => {
    imagesData.list = imagesData.list.concat(res.data.picture_infos);
    load = false;
  });
}


onBeforeMount(() => {
  fetchImgInfosListInvisible(50).then((res) => {
    res.data.picture_infos.forEach((value, index) => {
      imagesData.list.push(value)}
      );
    });
});

let load = false;
onMounted(() => {
  // window.addEventListener(
  //     "scroll",
  //     () => {
  //       // 监听滚动条位置
  //       let body = document.documentElement || document.body;
  //       let scrollTop = body.scrollTop; // 获取距离顶部的距离
  //       let windowHeight = body.clientHeight; // 获取可视区的高度
  //       let scrollHeight = body.scrollHeight; // 获取滚动条的总高度
  //       if (scrollTop + windowHeight >= scrollHeight && !load) {
  //         console.log("到底了，正在获取更多的图图");
  //         load = true;
  //         let pics: number[] = [];
  //         imagesData.list.map((item) => pics.push(item.id));
  //         // console.log(pics)
  //         fetchImgInfosListInvisible(50, JSON.stringify(pics)).then((res) => {
  //           res.data.picture_infos.forEach((value, index) => {
  //             imagesData.list.push(
  //                 Object.assign(value, {spanVisual: false, listIndex: index})
  //             );
  //           });
  //           load = false;
  //         });
  //       }
  //     },
  //     true
  // );
});

const dialogVisualFlag = ref(false);
const selectImgID = ref(0);

const gotoSingleImage = () => {
  router.push(`/pic/${selectImgID.value}`);
};

const clickImgHandler = (id: number) => {
  dialogVisualFlag.value = true;
  selectImgID.value = id;
};

const resurgenceSinglePictureHandler = () => {
  resurgenceSinglePictureById(selectImgID.value).then((res) => {
    ElMessage({
      message: res.data,
      type: "success",
    });
  });
};

const closeDialog = () => {
  selectImgID.value = 0;
};

</script>

<style scoped lang="less">
.container {
  margin: 0 auto;
  width: 1200px;
}
.gray-row {
  background-color: #f5f5f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  .text {
    font-weight: 700;
  }
}

@media screen and (max-width: 1200px) {
  .container {
    width: 100%;
  }
}
</style>
